<script setup lang="ts">
import { getYearList } from '@/service'
import { useTyphoonStore } from '@/store'

const typhoonStore = useTyphoonStore()

type YearList = {
  value: number
  label: string
}

const yearList = ref<YearList[]>()
const year = ref<string>('2024年')

onMounted(async () => {
  const data = await getYearList()
  yearList.value = data.map((item) => {
    return { value: item.year, label: `${item.year}年` }
  })
})

watch(year, () => typhoonStore.setSelectedYear(year.value))
</script>

<template>
  <el-select v-model="year" class="m-2" placeholder="Select" size="small" style="width: 120px">
    <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<style scoped></style>
